/*
 * @Author: tomystery 
 * @Date: 2018-06-04 10:29:41 
 * @Last Modified by: t
 * @Last Modified time: 2018-06-04 14:41:04
 */
import React from 'react';

class ListSearch extends React.Component{
    constructor(props){
        super(props)
        this.state={
            searchType:'productId',//productId||''productId是默认的
            searchKeyword:''
        }
    }

//变化的时候
    onValueChange(e){
        let name=e.target.name;
        let value=e.target.value.trim(); 
        this.setState({
            [name]:value
    })
}

//点击提交按钮
onSearch(){
   this.props.onSearch(this.state.searchType,this.state.searchKeyword)
}

//点击回车按钮
searchKeywordKeyUp(e){
    if(e.keyCode===13){
      
        this.onSearch()
    }
}

    render(){
       
        return(
            <div className='row search-wrap'>
                    <div className='col-md-12'>
                        <div className="form-inline ">
                            <div className="form-group">
                                <select className='form-control' name='searchType' onChange={(e)=>this.onValueChange(e)}>
                                    <option value='productId'>按商品ID查询</option>
                                    <option value='productName'>按商品名称查询</option>
                                </select>
                            </div>
                            <div className="form-group">
                                <input type="text" className="form-control" id="exampleInputPassword3" placeholder="关键词" name='searchKeyword' onChange={(e)=>this.onValueChange(e)} onKeyUp={(e)=>this.searchKeywordKeyUp(e)}/>
                            </div>
                            <button type="button" className="btn btn-primary" onClick={(e)=>this.onSearch(e)}>搜索</button>
                        </div>
                    </div>
                </div>
        )
    }
}
export default ListSearch